<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #result td {
            text-align: center;
        }
        #data {
            border-collapse: collapse;
        }
        #data th {
            border-bottom: 1px solid black;
        }
        #data td {
            border-bottom: 1px dashed black;
        }
        #data tr:last-child>td {
            border: none;
        }
    </style>
</head>
<body>
    <div id="result">
        <input v-model.trim="keyword" type="text" @keydown.enter="loadData()"
               size="30" placeholder="请输入车牌号或车主姓名">
        <button @click="loadData()">查询</button>
        <hr>
        <div v-if="records.length > 0">
            <table id="data">
                <tr>
                    <th width="100">车牌号</th>
                    <th width="100">车主姓名</th>
                    <th width="150">违章原因</th>
                    <th width="180">违章时间</th>
                    <th width="180">处罚方式</th>
                    <th width="100">是否受理</th>
                    <th width="120">操作</th>
                </tr>
                <tr v-for="record in records">
                    <td>{{ record.car.carno }}</td>
                    <td>{{ record.car.owner }}</td>
                    <td>{{ record.reason }}</td>
                    <td>{{ record.makedate }}</td>
                    <td>{{ record.punish }}</td>
                    <td>{{ record.dealt | handledOrNot }}</td>
                    <td>
                        <a class="handle" href="">受理</a>
                        <a class="delete" href="">删除</a>
                    </td>
                </tr>
            </table>
            <div class="buttons">
                <button @click="loadFirstPage()">首页</button>&nbsp;&nbsp;
                <button :disabled="currentPage <= 1" @click="loadPrevPage()">上一页</button>&nbsp;&nbsp;
                第{{ currentPage }}页/共{{ totalPage }}页&nbsp;&nbsp;
                <button :disabled="currentPage >= totalPage" @click="loadNextPage()">下一页</button>&nbsp;&nbsp;
                <button @click="loadLastPage()">末页</button>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#result',
            data: {
                records: [],
                currentPage: 1,
                pageSize: 5,
                totalPage: 0,
                keyword: ''
            },
            filters: {
                handledOrNot(dealt) {
                    return dealt? '已受理': '未受理'
                }
            },
            methods: {
                loadData() {
                    fetch(`/api/records/?kw=${this.keyword}&size=${this.pageSize}&page=${this.currentPage}`)
                        .then(resp => resp.json())
                        .then(json => {
                            this.records = json.results
                            this.totalPage = parseInt((json.count - 1) / this.pageSize) + 1
                        })
                },
                loadFirstPage() {
                    if (this.currentPage != 1) {
                        this.currentPage = 1
                        this.loadData()
                    }
                },
                loadLastPage() {
                    if (this.currentPage != this.totalPage) {
                        this.currentPage = this.totalPage
                        this.loadData()
                    }
                },
                loadPrevPage() {
                    if (this.currentPage > 1) {
                        this.currentPage -= 1
                        this.loadData()
                    }
                },
                loadNextPage() {
                    if (this.currentPage < this.totalPage) {
                        this.currentPage += 1
                        this.loadData()
                    }
                }
            }
        })
    </script>
</body>
</html>